<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>轮转</title>
</head>
<style>
    .box {
        width: 100vw;
        overflow: hidden;
    }
    .list {
        display: flex;
        padding: 0;
        margin: 0;
    }
    .list> li {
        margin: 0;
        padding: 0;
        list-style: none;
    }
    .list> li > svg{
        width: 100vw;
    }
    .circle{
        position: relative;

    }
</style>
<body>
    <div class="box">
        <ul class="list">
            <li><svg viewBox="0 0 50 50 "> <polygon points="25,0 1,49, 49,49 " fill="#ccc000"></polygon></svg></li>
            <li><svg viewBox="0 0 50 50 "> <polygon points="1,1 1,49, 49,49 49,1 " fill="#54edfa"></polygon></svg></li>
            <li><svg viewBox="0 0 50 50 "> <circle cx='50%' cy="50%" r ='24'fill="99adef" ></circle></svg></li>
            <li><svg viewBox="0 0 50 50 "> <path d="M 25,0 l 26,4, l 25,25  z" fill="409aaa"></path></svg></li>
        </ul>
    </div>
    <div class="circle">
        <div class="item"></div>
    </div>

    <script>
        const list = document.querySelector('.list');
        list.innerHTML += list.innerHTML;
        let startPoint = 0,
            transX = 0,
            startX = 0,
            lastX = 0,// 移动后元素的translatex
            addX = 0 // 一次的移动量
            let viewWidth =window.innerWidth;
            let prop = .25,now = 4;// 当前索引
            list.addEventListener('touchstart', (ev)=> {
                let touch = ev.changedTouches[0];
                startPoint = touch.clientX; //为啥用页面坐标 , 我知道了物理像素和逻辑像素有倍率,好像用page这个倍率更大了,不是这样的， 是因为下面的指数爆炸    记录
                startX  = startPoint;//  ,这里不对啊我先改了
                
                list.addEventListener('touchmove',touchmove)
                ev.preventDefault();
            })
            function touchmove (e){
                const touch = e.changedTouches[0];
                // const addX = touch.pageX - startX; // 按我这种写法就要累加了
                addX = touch.pageX - startX ;
                transX = addX + lastX; // 变化量 加 之前的量
                // transX = addX + transX; // 确实这样写是指数爆炸啊
                // lastX = startX + transX ; //总感觉多此一举
                list.style.transition = 'none';
                list.style.transform = `translateX(${transX}px)`;
                e.preventDefault();
                console.log(startX,touch.pageX ,touch.clientX , transX,)
            }
            list.addEventListener('touchend', (e)=> {


                list.removeEventListener('touchmove', touchmove);
                lastX =  transX ; //一次移动结束后 记录
                if(Math.abs(transX) > viewWidth * prop){ // 移动距离大于某个
                    now -= transX / Math.abs(transX); // 负值 则+1
                    now =  now % 4; // 倍长数组实现循环，在拖到边界处替换为中間
                    if (now < 0){ now = 0}
                };
                lastX = -now * viewWidth;
                list.style.transition = '.5s';
                list.style.transform = `translateX(${lastX}px)`;
                e.preventDefault()
            })

            function getr(n,w){ // 正多边形的外接圆的半径
                if(n < 3 || w < 0)return null
                const angles = (n-2) * Math.PI;
                const angle = angles / n;
                const r = (w / 2) / Math.sin(angle / 2)
                return   (w / 2) /  Math.sin(((n-2) * Math.PI / n) /2);
            }
            function buildRing(arr, w){
                let n = arr.length;
                const angles = (n-2) * Math.PI;
                const angle = angles / n;
                let r = getr(n,w);
                for(let i = 0;i < n ; i++) {
                    arr[i].style.transform = `translateZ(${r}) rotate(${angle * i})`
                }
            }
    </script>
</body>
</html>